<template>
  <div>
    <h1>home</h1>
    <!-- 字符串写法 和对象写法中的path属性 可以写完整路径和路由的name属性 -->
    <!-- 对象写法中的name属性 只能写路由的name属性 -->


    
    <!-- router-link中to的字符串写法,只能书写路由地址 -->
    <!-- <router-link to="news">news</router-link>
    <router-link to="/home/music">music</router-link> -->

    <!-- router-link中to的对象写法 可以通过path属性来设置路由地址 -->
    <!-- <router-link :to="{
        path: '/home/news'
    }">news</router-link>
    <router-link :to="{
        path: 'music'
    }">music</router-link> -->

    <!-- router-link中to的对象写法 可以通过路由的name属性来设置路由地址 -->
    <router-link :to="{
      name:'news'
    }">news</router-link>
    <router-link :to="{
      name:'music'
    }">music</router-link>

    <!-- router-view是占位组件,用来存放路由组件  -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Home"
};
</script>

<style>
</style>